import {
  presets,
  editPreset,
  delPreset,
  movePreset,
  addPreset,
  resetPresets,
  importPresets,
} from "../presets";
import { Trash2, ChevronsUp, ChevronsDown } from "lucide-preact";
import { importData, downText } from "../utilities";
import SettingCheck from "./SettingCheck";

const PresetsPage = () => (
  <>
    <div class="flex w-full place-items-center justify-between p-1">
      <SettingCheck area="searchPart" prop="showPreset" desp="显示快捷输入" />
      <button
        type="button"
        class="btn btn-success btn-soft btn-sm"
        onClick={() => {
          addPreset();
        }}
      >
        新建快捷输入
      </button>
    </div>
    <div class="*:btn-soft *:btn-sm flex w-full justify-between p-1">
      <button
        type="button"
        class="btn btn-secondary"
        onClick={() => {
          importData(
            (data) => !Array.isArray(data) || typeof data[0] !== "string",
            importPresets,
          );
        }}
      >
        导入 json
      </button>
      <button
        type="button"
        class="btn btn-warning"
        onClick={() => {
          resetPresets();
        }}
      >
        重置
      </button>
      <button
        type="button"
        class="btn btn-info"
        onClick={() => {
          downText(JSON.stringify(presets.value, void 0, 2), "快捷输入.json");
        }}
      >
        导出 json
      </button>
    </div>
    <ul class="list w-full">
      {presets.value.map((word) => (
        <li class="list-row place-items-center p-1" key={word}>
          <div class="p-px" />
          <button
            class="inline appearance-none truncate"
            onClick={() => editPreset(word)}
          >
            {word}
          </button>
          <div class="join *:btn-soft *:btn-sm">
            <button
              class="btn btn-info join-item"
              onClick={() => {
                movePreset(word, true);
              }}
            >
              <ChevronsUp />
            </button>
            <button
              class="btn btn-info join-item"
              onClick={() => {
                movePreset(word, false);
              }}
            >
              <ChevronsDown />
            </button>
            <button
              type="button"
              class="btn btn-error join-item"
              onClick={() => {
                delPreset(word);
              }}
            >
              <Trash2 />
            </button>
          </div>
        </li>
      ))}
    </ul>
  </>
);

export default PresetsPage;
